<template>
  <div class="box-border w-full h-full p-6">
    <div class="mb-6 text-xl font-bold text-center">运行方案图</div>

    <!-- 整体布局：左侧站点名称，右侧图表 -->
    <div class="scheme-container">
      <!-- 左侧站点名称列 -->
      <div class="station-names">
        <div class="station-name-item wuerhe-name">乌尔禾站</div>
        <div class="station-name-item baike-name">百克站</div>
        <div class="station-name-item station81-name">81#站</div>
      </div>

      <!-- 右侧统一图表 -->
      <div class="chart-area">
        <v-chart :option="combinedOption" :autoresize="true" class="main-chart" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { CustomChart } from 'echarts/charts'
import { GridComponent, TooltipComponent } from 'echarts/components'
import VChart, { THEME_KEY } from 'vue-echarts'
import { provide, computed } from 'vue'

use([CanvasRenderer, CustomChart, GridComponent, TooltipComponent])

provide(THEME_KEY, 'light')

const props = defineProps({
  ganttData: {
    type: Object,
    required: false,
    default: null
  }
})

// 生成甘特图配置
const combinedOption = computed(() => {
  const series = []

  // 检查数据是否存在
  if (!props.ganttData || !props.ganttData.series) {
    return {
      grid: { left: '15%', right: '10%', top: '5%', bottom: '5%', containLabel: true },
      xAxis: {
        type: 'value',
        min: 0,
        max: 10,
        interval: 1,
        axisLine: { lineStyle: { color: '#333', width: 2 } },
        axisTick: { show: true, lineStyle: { color: '#333', width: 1 } },
        axisLabel: {
          formatter: '{value}',
          color: '#333',
          fontSize: 14,
          fontWeight: 'bold',
          margin: 12
        },
        splitLine: { show: true, lineStyle: { color: '#e0e0e0', type: 'dashed' } },
        name: '时间 (h)',
        nameLocation: 'end',
        nameTextStyle: { color: '#333', fontSize: 16, fontWeight: 'bold', padding: [0, 0, 0, 5] }
      },
      yAxis: {
        type: 'category',
        data: [
          '81#-3',
          '81#-2',
          '81#-1',
          '',
          '',
          '',
          '百-3',
          '百-2',
          '百-1',
          '',
          '',
          '乌-3',
          '乌-2',
          '乌-1'
        ],
        axisLine: { show: false },
        axisTick: { show: false },
        axisLabel: {
          color: '#333',
          fontSize: 14,
          fontWeight: 'bold',
          margin: 20,
          interval: 0 // 显示所有标签
        },
        splitLine: { show: true, lineStyle: { color: '#f0f0f0', type: 'solid' } }
      },
      series: [],
      tooltip: {
        formatter: () => '暂无数据'
      }
    }
  }

  props.ganttData.series.forEach((pump, pumpIndex) => {
    const color = getPumpColor(pump.name)

    // 计算新的Y轴索引（考虑空行）
    let yAxisIndex
    if (pump.name.startsWith('乌')) {
      yAxisIndex = 13 - pumpIndex // 乌-1=13, 乌-2=12, 乌-3=11
    } else if (pump.name.startsWith('百')) {
      yAxisIndex = 8 - (pumpIndex - 3) // 百-1=8, 百-2=7, 百-3=6
    } else if (pump.name.startsWith('81#')) {
      yAxisIndex = 2 - (pumpIndex - 6) // 81#-1=2, 81#-2=1, 81#-3=0
    }

    // 直接使用区间渲染
    pump.intervals.forEach(([start, end]) => {
      series.push({
        name: pump.name,
        type: 'custom',
        renderItem: function (params, api) {
          const categoryIndex = api.value(2)
          const startTime = api.value(0)
          const endTime = api.value(1)

          const startCoord = api.coord([startTime, categoryIndex])
          const endCoord = api.coord([endTime, categoryIndex]) // +1 保证覆盖到末端

          const height = api.size([0, 1])[1] * 0.4
          const y = startCoord[1] - height / 2

          return {
            type: 'rect',
            shape: {
              x: startCoord[0],
              y: y,
              width: endCoord[0] - startCoord[0],
              height: height
            },
            style: {
              fill: color,
              stroke: '#fff',
              lineWidth: 1
            }
          }
        },
        data: [[start, end, yAxisIndex, pump.name]]
      })
    })
  })

  return {
    grid: { left: '15%', right: '10%', top: '5%', bottom: '5%', containLabel: true },
    xAxis: {
      type: 'value',
      min: 0,
      max: 10,
      interval: 1,
      axisLine: { lineStyle: { color: '#333', width: 2 } },
      axisTick: { show: true, lineStyle: { color: '#333', width: 1 } },
      axisLabel: {
        formatter: '{value}',
        color: '#333',
        fontSize: 14,
        fontWeight: 'bold',
        margin: 12
      },
      splitLine: { show: true, lineStyle: { color: '#e0e0e0', type: 'dashed' } },
      name: '(h)',
      nameLocation: 'end',
      nameTextStyle: { color: '#333', fontSize: 16, fontWeight: 'bold', padding: [0, 0, 0, 5] }
    },
    yAxis: {
      type: 'category',
      data: [
        '81#-3',
        '81#-2',
        '81#-1',
        '',
        '',
        '',
        '百-3',
        '百-2',
        '百-1',
        '',
        '',
        '乌-3',
        '乌-2',
        '乌-1'
      ],
      axisLine: { show: false },
      axisTick: { show: false },
      axisLabel: {
        color: '#333',
        fontSize: 14,
        fontWeight: 'bold',
        margin: 20,
        interval: 0 // 显示所有标签
      },
      splitLine: { show: true, lineStyle: { color: '#f0f0f0', type: 'solid' } }
    },
    series,
    tooltip: {
      formatter: (params) => {
        const data = params.data
        return `${data[3]}<br/>运行时间: ${data[0]} - ${data[1]} (h)`
      }
    }
  }
})

// 根据泵名称获取颜色
function getPumpColor(pumpName) {
  if (pumpName.startsWith('乌')) return '#4678b2'
  if (pumpName.startsWith('百')) return '#e74c3c'
  if (pumpName.startsWith('81#')) return '#27ae60'
  return '#999'
}
</script>

<style lang="scss" scoped>
.scheme-container {
  display: flex;
  height: 600px;
  gap: 20px;
}

.station-names {
  width: 120px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding: 40px 0;
}

.station-name-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 160px;
  font-size: 16px;
  font-weight: 600;
  color: #333;
  text-align: center;
  border-radius: 8px;
  transition: all 0.3s ease;

  &:hover {
    transform: translateX(5px);
  }
}

.wuerhe-name {
  color: #4678b2;
  border-left: 4px solid #4678b2;
  background: rgba(70, 120, 178, 0.05);
}

.baike-name {
  color: #e74c3c;
  border-left: 4px solid #e74c3c;
  background: rgba(231, 76, 60, 0.05);
}

.station81-name {
  color: #27ae60;
  border-left: 4px solid #27ae60;
  background: rgba(39, 174, 96, 0.05);
}

.chart-area {
  flex: 1;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: 20px;
}

.main-chart {
  height: 100%;
  width: 100%;
}
</style>
